<template>
	<div class="pages-container">
		<div class="containerx-box">
			<div class="container-header">
				<span class="iconfont mr5">{{ currentMenu.icon }}</span>
				<h3> {{ currentMenu.text }} </h3>
			</div>
			<div class="containerx-body">
				<template v-if="currentComponent">
					<component :is="currentComponent" :key="currentMenu.id" :currentMenu="currentMenu" />
				</template>
				<div v-else class="error-message">
					<p>未找到对应的设置组件</p>
					<p v-if="currentMenu.id" class="error-detail">组件 ID: {{ currentMenu.id }}</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import {
	ref,
	onMounted,
	onBeforeUnmount,
	nextTick,
	defineExpose,
	computed,
	defineProps,
	getCurrentInstance
} from '@vue/composition-api'
const { proxy } = getCurrentInstance()

import accSecury from "../module/accSecury.vue" // 账号与安全
import myCompany from "../module/myCompany.vue" // 我的企业
import storeManage from "../module/storeManage.vue" // 门店管理
import warehouseManage from "../module/warehouseManage.vue" // 仓库管理
import memberManage from "../module/memberManage.vue" // 成员管理
import customerSetting from "../module/customerSetting.vue" // 客户设置
import supplierSetting from "../module/supplierSetting.vue" //  供应商设置
import salesSetting from "../module/salesSetting.vue" // 销售设置
import procureSetting from "../module/procureSetting.vue" // 采购设置
import warehouseManageSetting from "../module/warehouseManageSetting.vue" // 库管设置
import yuyueSetting from "../module/yuyueSetting.vue" // 预约设置
import basicSetting from "../module/basicSetting.vue" // 基础设置
import helper from "../module/helper.vue" // 帮助中心

const props = defineProps({
	currentMenu: {
		type: Object,
		default: () => ({})
	}
})

const componentMap = {
	'accSecury': accSecury, // 账号与安全
	'myCompany': myCompany, // 我的企业
	'storeManage': storeManage, // 门店管理
	'warehouseManage': warehouseManage, // 仓库管理
	'memberManage': memberManage, // 成员管理
	'customerSetting': customerSetting, // 客户设置
	'supplierSetting': supplierSetting, // 供应商设置
	'salesSetting': salesSetting, // 销售设置
	'procureSetting': procureSetting, // 采购设置
	'warehouseManageSetting': warehouseManageSetting, // 库管设置
	'yuyueSetting': yuyueSetting, // 预约设置
	'basicSetting': basicSetting, // 基础设置
	'helper': helper // 帮助中心
}

const currentComponent = computed(() => {
	const menuId = props.currentMenu?.id
	if (!menuId) {
		return null
	}
	const component = componentMap[menuId]
	if (!component) {
		return null
	}
	return component
})


</script>

<style scoped lang="scss">
.pages-container {
	margin: 14px;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	height: 100%;

	.containerx-box {
		/* 玻璃透明白色效果 */
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(245, 232, 232, 0.9);
		height: calc(100% - 30px);
		width: 100%;
		border-radius: 6px;
		overflow: hidden;
		/* 防止整体容器溢出 */
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.container-header {
			box-sizing: border-box;
			border-bottom: 1px solid #e1e8ed;
			padding: 0 14px;
			height: 42px;
			display: flex;
			align-items: center;
		}

		.containerx-body {
			box-sizing: border-box;
			padding: 10px;
			flex: 1;
			/* 关键修复：设置高度为0，让flex-grow生效 */
			height: 0;
			/* 确保flex项可以收缩 */
			min-height: 0;

			.error-message {
				text-align: center;
				padding: 40px 20px;
				color: #999;

				p {
					margin: 10px 0;
					font-size: 14px;
				}

				.error-detail {
					font-size: 12px;
					color: #ccc;
				}
			}
		}
	}
}
</style>